<template>
  <!-- 调令资源清单弹窗 -->
  <a-modal
    v-model:open="visible"
    destroyOnClose
    :width="1000"
    @cancel="handleCancel"
    centered
    :footer="null"
    class="resource-list-modal"
  >
    <template #title>
      {{ props.commandData.commandName }} - 资源清单
      <VerticalAlignBottomOutlined style="font-size: 18px; cursor: pointer"
    /></template>
    <div class="resource-list-content">
      <div class="section-header">
        <!-- <div class="section-title">
          调节资源清单
          <span class="download-icon">⬇</span>
        </div> -->
      </div>

      <!-- 资源清单表格 -->
      <div class="resource-table-container">
        <a-table
          :dataSource="resourceData"
          :columns="resourceColumns"
          :pagination="false"
          size="small"
          bordered
          :scroll="{ x: 'max-content' }"
          class="custom-resource-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'index'">
              <span class="index-cell">{{ record.index }}</span>
            </template>
            <template v-else>
              <span class="data-cell">{{ record[column.dataIndex] }}</span>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  resourceListVisible: {
    type: Boolean,
    default: false,
  },
  commandData: {
    type: Object,
    default: () => ({}),
  },
})

const emits = defineEmits(["update:resourceListVisible"])

const visible = ref(props.resourceListVisible)

// 监听弹窗显示状态
watch(
  () => props.resourceListVisible,
  (val) => {
    visible.value = val
    if (val) {
      // 弹窗打开时可以加载数据
      loadResourceData()
    }
  }
)

// 资源清单数据
const resourceData = ref([
  {
    key: "1",
    index: 1,
    userName: "广州铭洋汽车零部件有限公司",
    userCode: "080012004463141O",
    resourceCode: "100101",
  },
  {
    key: "2",
    index: 2,
    userName: "广州铭洋汽车零部件有限公司",
    userCode: "080012004463141O",
    resourceCode: "100102",
  },
  {
    key: "3",
    index: 3,
    userName: "天津松林光学（广州）有限公司",
    userCode: "080013000435510O",
    resourceCode: "100201",
  },
])

// 表格列配置
const resourceColumns = ref([
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 80,
    align: "center",
  },
  {
    title: "用户名称",
    dataIndex: "userName",
    key: "userName",
    width: 300,
    align: "center",
  },
  {
    title: "用户编号",
    dataIndex: "userCode",
    key: "userCode",
    width: 200,
    align: "center",
  },
  {
    title: "资源编号",
    dataIndex: "resourceCode",
    key: "resourceCode",
    width: 150,
    align: "center",
  },
])

// 加载资源数据
const loadResourceData = () => {
  // 这里可以根据commandData加载对应的资源清单数据
  console.log("加载资源数据:", props.commandData)
}

// 关闭弹窗
const handleCancel = () => {
  emits("update:resourceListVisible", false)
}
</script>

<style lang="less" scoped>
.resource-list-modal {
  :deep(.ant-modal-content) {
    background: #1f1f1f;
    border: 1px solid #303030;
  }

  :deep(.ant-modal-header) {
    background: #1f1f1f;
    border-bottom: 1px solid #303030;

    .ant-modal-title {
      color: #ffffff;
      font-size: 16px;
      font-weight: 500;
    }
  }

  :deep(.ant-modal-body) {
    background: #1f1f1f;
    padding: 20px;
  }

  :deep(.ant-modal-close) {
    color: #ffffff;

    &:hover {
      color: #1890ff;
    }
  }
}

.resource-list-content {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;

      .download-icon {
        font-size: 18px;
        cursor: pointer;
        color: #1890ff;

        &:hover {
          color: #40a9ff;
        }
      }
    }
  }

  .resource-table-container {
    .custom-resource-table {
      :deep(.ant-table) {
        .ant-table-thead > tr > th {
          color: #ffffff;
          text-align: center;
          font-weight: 500;
          font-size: 12px;
          white-space: nowrap;
        }

        .ant-table-tbody > tr > td {
          color: #ffffff;
          text-align: center;
          font-size: 12px;
          white-space: nowrap;
          &:first-child {
            font-weight: 500;
            color: #ffffff;
          }
        }

        .ant-table-tbody > tr:hover > td {
          background: #333333 !important;

          &:first-child {
            background: #333333 !important;
          }
        }
      }
    }

    .index-cell {
      color: #ffffff;
      font-weight: 500;
    }

    .data-cell {
      color: #ffffff;
      font-weight: 400;
    }
  }
}
</style>
